<template>
  <div>
    <div class="title">收货地址</div>
    <div class="main">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column width="70" align="center" label="">
          <template slot-scope="scope">
            <i v-if="scope.row.static">默认</i>
            <button size="mini" v-else @click="setStatic(scope.$index)">
              设为默认
            </button>
          </template>
        </el-table-column>
        <el-table-column label="收货人" width="120" prop="name">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="120">
        </el-table-column>
        <el-table-column prop="area" label="区域" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="详细地址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-button type="primary" @click="addRess()">新增</el-button>
      </div>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="收货人" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="区域" :label-width="formLabelWidth">
            <el-select
              v-model="form.areas.province"
              placeholder="请选择活动区域"
            >
              <el-option label="四川省" value="shanghai"></el-option>
              <el-option label="江苏省" value="beijing"></el-option>
            </el-select>
            <el-select v-model="form.areas.city" placeholder="请选择活动区域">
              <el-option label="成都市" value="shanghai"></el-option>
              <el-option label="无锡市" value="beijing"></el-option>
            </el-select>
            <el-select
              v-model="form.areas.district"
              placeholder="请选择活动区域"
            >
              <el-option label="高新区" value="shanghai"></el-option>
              <el-option label="武侯区" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="区域" :label-width="formLabelWidth">
            <el-select v-model="form.area" placeholder="请选择活动区域">
              <el-option label="四川省" value="shanghai"></el-option>
              <el-option label="江苏省" value="beijing"></el-option> </el-select
          ></el-form-item> -->
          <el-form-item label="详细地址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="默认" :label-width="formLabelWidth">
            <el-checkbox v-model="form.static" autocomplete="off"></el-checkbox>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      dialogFormVisible: false,
      tableData: [
        {
          name: "小李",
          phone: "136",
          area: "四川省成都市",
          address: "贾家镇",
          static: true,
        },
        {
          name: "小李",
          phone: "136",
          area: "四川省成都市",
          address: "贾家镇",
          static: false,
        },
      ],
      form: {
        name: "",
        phone: "",
        areas: { province: "", city: "", district: "" },
        area: "",
        address: "",
        static: false,
      },
      formLabelWidth: "120px",
    };
  },
  computed: {},
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addRess() {
      this.dialogFormVisible = true;
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    setStatic(index) {
      console.log("setStatic:index=", index);
    },
  },
};
</script>

<style lang='less' scoped>
.el-select {
  width: 160px;
}
.el-input {
  width: 180px;
}

.title {
  font-size: 24px;
  font-family: "font6";
  margin-bottom: 20px;
  margin-top: 10px;
}
</style>